import React, { useEffect, useState } from "react";
import { Table, Button, Tag ,Popover , Switch} from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import axios from "axios";
import "./RightList.css";

export default function RightList() {
  const [dataSource, setDataSource] = useState([]);
  const [visible, setVisible] = useState(false)
  useEffect(() => {
    axios.get("http://localhost:9925/rights?_embed=children").then((res) => {
      setDataSource(
        res.data.map((item) => {
          if (!item.children.length) {
            item.children = "";
          }
          return item;
        })
      );
    });
  }, []);

  const deleteItem = (item) => {
    if (item.grade === 1) {
      //   axios.delete("http://localhost:9925/rights/"+item.id)
      let dataFilter = dataSource.filter((nav) => nav.id != item.id);
      setDataSource([...dataFilter]);
    }
  };

  const onChange = ()=> {
      console.log(12312)
  }

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => <b>{id}</b>,
    },
    {
      title: "权限名称",
      dataIndex: "title",
    },
    {
      title: "权限路径",
      dataIndex: "key",
      render: (text, record) => (
        <Tag
          color={record.children || record.children == "" ? "orange" : "purple"}
        >
          {text}
        </Tag>
      ),
    },
    {
      title: "操作",
      render: (text, item) => (
        <div>
          <Popover
            content={<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onChange={onChange} />}
            title="Title"
            trigger={item.pagepermission === 1 ? "click" : ''}
          >
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              style={{ marginRight: "20px" }}
              onClick={()=> setVisible(true)}
            />
          </Popover>

          <Button
            type="primary"
            shape="circle"
            icon={<DeleteOutlined />}
            onClick={() => deleteItem(item)}
            danger
          />
        </div>
      ),
    },
  ];
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={{ pageSize: 5 }}
    />
  );
}
